[00:00] Welcome back everyone, it's time to create some copies of our data card. So we will switch back to our station details view here. And I'd like to start placing these data cards below our tech. So I'm just going to start double clicking on vessel here until the vessel container is deeply selected. Alright, so if we head over to our component panel, and if we search for flex. So we've been using the flex container this whole time, it's time to switch over to the flex repeater. Now I mentioned what this does in other videos, but basically allows you to create multiple copies of a single view. So I will drag the flex repeater into the vessel container. And we will get the component panel out of the way here. And it's blank right now because it doesn't know which view to create instances of. So we can head over to the path property here in the property editor, click the little drop down, we see the sort of view folder structure we've been building in the project browser, we'll go into the objects folder, and it should have our data card.

[01:02] So I'll select that and click OK. And you still won't see anything in here, because we need to add some instances, we'll need three specifically. So under instances here, I'm going to click the little plus button, which then adds a single instance. And I'm going to do that two more times. So one, two, so I have three instances. Now it looks a little silly. Because they are positioned horizontally, which we don't really don't want. So we simply need to play with the settings on the flex repeater. Now there are some positional properties over here. And the flex repeater as the name kind of gives it away. But it does use the same sort of Flexbox settings that the flex container uses. So if you're familiar with the flex container, since we've been using it a lot here, you probably recognize some of these properties. So we do know that direction, we can set this to column, which will then go ahead and stack our instances. Now that's still a little too wide. Although I do think I want to make the vessel container a little bit wider. But what I think I'd like to do is I'll tell the flex repeater, that I don't want to use the default width of our view.

[02:02] So I'm going to turn that off. There we go. There we are. So things kind of fit in there kind of nicely, that's still a little too narrow, though, we're going to be typing in the word temperature, which has quite a few characters. So I want to give this a little bit more room. So I think what I'll do now is actually click outside of our vessel container, which changes the deep selection. And then I'll go ahead and just grab the right side of vessel container, maybe just resize it about there seems fine. Alright, I'll go ahead and deeply select vessel container again. And just for fun, just to show you, I'm going to actually deeply select the flex repeater. So I'll double click again. So and the reason I'm doing this here is I did mention that we do add a little panel in the upper right hand corner, whenever the component that's deeply selected has some additional buttons or settings. And because the flex repeater is sort of based off the flex container, it has a very similar panel over here. So we could play around with the flex settings up here, if we wanted to, I'm not really going to do anything with that, but just mentioning it can. Alright, so going back to our instances here, I'm going to expand all three of them actually. Now, the way these work is that we do have some built in properties that allow us to apply styling and position properties to each individual instance.

[03:06] But I do need to pass in some view parameters to these. So I need to be able to type or to tell each instance, what the name value should be with the the value it should be displaying should be and then what the unit should be if there is one. And the way that works on the flex repeater here for each instance, you can add your own properties here. So if you type in a property name, or create a new property under an instance, and the name of that matches the exact spelling and casing of view parameter on the view, you're instantiating, it'll give you an opportunity to change the value. So we created three view parameters on data card we created name, unit, and value. So for zero here, I'm going to hover over zero, I'm going to click the little plus button. I'm going to select a value. And we'll change the name of this property here to name I'll tab over. And let's type in pH and hit Enter. And we can see that it change the name field on this first data card.

[04:02] So we need to add two more, so we'll come back over to zero click the little plus button, we'll add a value object. Just type in value and now about 100. And then we'll add one more. I'll type in units. And I'm not going to have a units for each so I'm just going to backspace and hit enter. Okay, so we basically need to add these three to these other two instances. I'm going to cheat a little bit though, I'm actually going to right click on zero. I'm going to copy zero. And then I'm going to right click on one, and I'll paste onto one. And we'll add those properties we created a moment ago. And then I'll go ahead and right click on two, and I'll paste on the two as well. I'll change the the names and the units for these though. So for the name for instance one there, that will be our temperature. I'll tab over to units and we'll type in Fahrenheit. And then we'll go down to instance two and it'll be viscosity and I'll tab down Some more, and that should be able you've passed schools a second.

[05:03] Okay, now we do need to set up some bindings. So for each value object here, we do need to tie this to a live tag based off of whichever station we're looking at. So of course, that means using view parameters. Now we can start configuring some indirect tag bindings to pipe our real time data into these instances. Now, you're probably thinking, hey, why don't we set up an indirect tag binding first and then copy everything over? Well, when you're doing a copy action here, copy is very different than copy binding. So if we did a copy action earlier, and we already had our indirect tag binding set up on a property here, it wouldn't include the binding in the copy. So that's why I'm doing it as a separate step here. So for value, we'll click the little binding icon here on instant zero, and instance, zero is going to pH. So We'll do a tag binding, we'll do an indirect tag binding, we'll switch over to that, we'll click the little tag button on the right of the tag path, we'll go to our station one, we'll grab a pH, we'll click OK. And again, we can just type into the end of the tag path and change something else.

[06:03] Now, I don't want to change this one here, because pH is is the correct tag in this case. Now, we also see that we do have some trailing decimals there. So we could apply a transform around that. But remember, on our data card, the value label, right, so those are the ones the blue text there that already has a format transform defined. So we don't really have to do any sort of formatting here, we can actually just leave this with the raw value. I'll click OK here. And it's going to automatically apply the formatting for us. So we're all set there. Now we'll take the binding on instant zero, so I'll right click where it says value, I will copy the binding here. And then I will paste the binding onto the value in instance one, and then I will paste again on the value instance two. And then we just need to update those bindings. So they're looking at the correct attack. So for instance, one, I'll click the binding icon. We will change pH to temperature. Hit enter there. And then for instance two click the binding icon. Again, we'll backspace type of scarcity looks like we're getting a good value. Okay, okay.

[07:10] Hey, everyone, its editing Paul from the future here, I'm looking back at the footage. And I realized our indirect tag bindings aren't actually referencing any sort of parameter. So we're going to want to go ahead and change that right now. So my view looks a little bit different than yours. Because this is from after I finished this current video here, so don't worry, you'll see the rest of the changes I make. But I did want to go ahead and update those bindings real quick. So in the property editor here, and I do have my flex repeater selected, and we'll take a look at instance, zero, we'll go to the value property here, I'll click the binding icon. And we want to replace the one here in the path with a reference to we'll click the Browse properties here, we'll go down to the view, we'll go to params and station number and click OK. That should give us a good quality. There we are. So just like we've done elsewhere, with indirect tag bindings here, I just simply forgot that one very important piece here. So i want to make sure you saw that I did this and you can follow along as well. So again, for some here, we'll go to brands registration number, click OK Click OK again, and then for instance two go to the value property binding.

[08:14] Delete the one and select station number. All right, so you should be set up for the rest series there. Sorry about that. But we'll go back to that goofy, Paul, back in the past. Cool. All right. So we're about done, I think the spacing on here could be improved a little bit for our cards. I'll collapse instances here, since I don't really need to mess with it anymore. We could probably tell the flex repeater, that it doesn't need to use the default row height , it might need to change the height on the instances depending on how much is available. So let's turn that off. I'll also tell the component that it doesn't need to grow so much that grow to zero. And it looks a little silly, but it makes sense because the basis is set to zero right now. So that's why everything's so small. So let's change the basis to Oh, I don't know how about 75 pixels maybe that looks good. And we could probably split them up a little bit. So justification or justify up here is that two flex starts.

[09:04] So maybe we could change this to maybe space around. That looks pretty good, maybe we try space evenly two actually kind of like spacing with a little bit more. So maybe we'll do that instead. Now if we had a lot of data cards in here, and we were worried about the space between the vessel and our data cards, we could add a little bit of a margin either to the top here or to the bottom of the vessel to help with that, but, it looks okay, for right now, I don't think there's necessarily anything we need to do about that. So I'm actually going to click out of there. And I think we're about done with these data cards here. Now, one thing I did want to do, since I forgot to do it earlier here, I played around with our alarm status table. But I did leave one of the columns the state in kind of an odd little spot here. So I think I'm going to do is I'm actually going to keep it just single clicking on the alarm status table until it's selected. And I think I'm going to go ahead and resize the column heading here for our state just because that I think that states a little more important than the source there. So I'm going to put the designer in preview mode. Anyway and just resize that column a little bit. I'm going to make Source a little bit shorter, it looks a little bit better.

[10:03] Now, some of the columns here, such as source path are useful for us while we're developing, but they're not that useful for our users. So I think I'd like to hide some of these. So if you kind of scroll down here, we can go down to the columns property and go to the is active area, we'll expand that. And we didn't have like the various sort of columns that can appear on this component. For source over here, I'm actually going to expand source, I'm going to disable this, so it kind of goes away. And the display path here is something we could also turn off, although I think I'm going to leave that on, mostly because it does state which station the alarm is for now a better practice would be to change the display path to something other than just our tech path here. But that kind of goes outside of the scope of this lesson. We only have one alarm. So priority isn't that useful. So I think I'll go down. or, excuse me, I'll go up to priority. I'll turn that off there. And that should be fine. So the spacing is a little bit nicer on that now, so. Alright, we'll wrap up this video by saving our project.

[11:03] In the next video, we'll add this station details view to our navigation view allowing us to actually get to this screen within our project. So I'll see you then.